<script setup lang="ts">
import useApi from './useApi';
import { ref } from 'vue'
import msgModal from './components/msgModal.vue'
import homepage from './components/homepage.vue'
const msgModalRef = ref(msgModal);
let isLogin = ref(true);
let username = ref(''),password=ref(''),inputType = ref(1);
const showModal = (title) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title);
	}
}
const inputKeyNum =  (event) =>  {
	if(inputType.value == 1){
		username.value = username.value+event.target.innerText;
	}else{
		password.value = password.value+event.target.innerText;
	}
}
const deleteKeyNum = () => {
	if(inputType.value == 1){
		username.value = username.value.substring(0,username.value.length-1);
	}else{
		password.value = password.value.substring(0,password.value.length-1);
	}
}
const login = async () => {
	const bodyData = ref({});
	if(username.value == '' || password.value == ''){
		showModal('请输入用户名和密码');
		return;
	}
	bodyData.value = {
		username:username.value,
		password:password.value
	}
	const options:any = {
		headers: {
			"Content-Type": "application/json",
			"token":localStorage.getItem('token')
		},
		method: "POST",
		body:JSON.stringify(bodyData.value)
	};
	
	try {
		const res:any = await useApi('check',options);
		
		if(res.code == 1){
			localStorage.setItem('token',res.token);
			localStorage.setItem('title',res.data);
			localStorage.setItem('shopId',res.shopId);
			isLogin.value = false;
		}else{
			showModal(res.msg);
		}
	} catch (error) {
		console.error('登录请求失败:', error);
		showModal('网络连接失败，请检查网络后重试');
	}
}
const close = () => {
	window.electron.ipcRenderer.send('logout');
}
</script> 
<template>
	<main class="logintohomepagemain" v-if="!isLogin">
		<homepage />
	</main>
	<main class="loginmain" v-if="isLogin">
		<msgModal ref="msgModalRef"/>
		<div class="left">
			<img src="./assets/logo.jpg" alt="" class="logo">
			
		</div>
		<div class="right">
			<div class="top">
				<input type="text" @click="inputType = 1" v-model="username" placeholder="请输入用户名">
				<input type="password" @click="inputType = 2" v-model="password" placeholder="请输入密码">
			</div>
			<div class="keyboard">
				<div class="row1">
		            <button @click="inputKeyNum" class="key">1</button>
		            <button @click="inputKeyNum" class="key">2</button>
		            <button @click="inputKeyNum" class="key">3</button>
		            <button @click="inputKeyNum" class="key">4</button>
		            <button @click="inputKeyNum" class="key">5</button>
		            <button @click="inputKeyNum" class="key">6</button>
		            <button @click="inputKeyNum" class="key">7</button>
		            <button @click="inputKeyNum" class="key">8</button>
		            <button @click="inputKeyNum" class="key">9</button>
		            <button @click="inputKeyNum" class="key">0</button>
		            <button @click="deleteKeyNum" class="key" style="width: 110px">Backspace</button>
		        </div>
		        <div class="row2">
		            <button @click="inputKeyNum" class="key">q</button>
		            <button @click="inputKeyNum" class="key">w</button>
		            <button @click="inputKeyNum" class="key">e</button>
		            <button @click="inputKeyNum" class="key">r</button>
		            <button @click="inputKeyNum" class="key">t</button>
		            <button @click="inputKeyNum" class="key">y</button>
		            <button @click="inputKeyNum" class="key">u</button>
		            <button @click="inputKeyNum" class="key">i</button>
		            <button @click="inputKeyNum" class="key">o</button>
		            <button @click="inputKeyNum" class="key">p</button>
		        </div>
		        <div class="row3">
		            <button @click="inputKeyNum" class="key">a</button>
		            <button @click="inputKeyNum" class="key">s</button>
		            <button @click="inputKeyNum" class="key">d</button>
		            <button @click="inputKeyNum" class="key">f</button>
		            <button @click="inputKeyNum" class="key">g</button>
		            <button @click="inputKeyNum" class="key">h</button>
		            <button @click="inputKeyNum" class="key">j</button>
		            <button @click="inputKeyNum" class="key">k</button>
		            <button @click="inputKeyNum" class="key">l</button>
		        </div>
		        <div class="row4">
		            <button @click="inputKeyNum" class="key">z</button>
		            <button @click="inputKeyNum" class="key">x</button>
		            <button @click="inputKeyNum" class="key">c</button>
		            <button @click="inputKeyNum" class="key">v</button>
		            <button @click="inputKeyNum" class="key">b</button>
		            <button @click="inputKeyNum" class="key">n</button>
		            <button @click="inputKeyNum" class="key">m</button>
		        </div>
			</div>
			<div class="bottom">
				<button type="button" @click="login">登陆</button>
				<button type="button" @click="close">退出</button>
			</div>
		</div>
    </main>
</template>
<style lang="scss">
#app{
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	display: block;
}
html{
	width: 100%;
	height:100%;
}
body{
	width:100%;
	height:100%;
	padding: 0;
    margin: 0;
	display: block;
}
.logintohomepagemain{
	height:100%;
}
.loginmain{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow: auto;
    background-image: url(./assets/1.png);
    background-repeat: no-repeat;
    background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	.left{
		width:40%;
		height:100%;
		display: flex;
		justify-content: center;
		.logo{
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
		}
	}
	.right{
		width:60%;
		height:100%;
		padding-top: 50px;
		display: grid;
		.top{
			height: 100%;
			display: grid;
			align-items: center;
		}
		input{
			padding-left: 10px;
			width: 99%;
			height: 70%;
			border-radius: 10px;
			line-height: 70%;
			color: rgba(0, 0, 0, .85);
			border: none;
		}
		input:focus{
			outline: 1px solid #16baaa70;
		}
		.bottom button{
			width: 97%;
			margin-right: 10px;
			margin-bottom: 10px;
			word-spacing: normal;
			display: inline-block;
			vertical-align: middle;
			height: 70px;
			line-height: 70px;
			border: 1px solid transparent;
			padding: 0 18px;
			background-color: #16baaa70;
			color: #fff;
			white-space: nowrap;
			text-align: center;
			font-size: 20px;
			border-radius: 10px;
			cursor: pointer;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
		.keyboard {
			display: grid;
			div{
				display: flex;
				justify-content: center;
				align-items: center;
				.key {
					cursor: pointer;
					padding: 0.5em 0.7em;
					border: none;
					border-radius: 4px;
					background-color: #f0f0f0;
					box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
					outline: none;
					transition: background-color 0.2s ease-in-out;
					height: 60px;
					width: 60px;
					margin: 0 2px;
					font-size: 18px;
					.key:hover {
						background-color: #e0e0e0;
					}
				}
			}
		}
	}
}

</style>